import * as React from 'react';
class Jxs extends React.Component{
     render() {
        return (
            <div className="c-react-home-wrap">
                <h2 onClick={()=>{
                    window.location.href='http://10.15.198.18:8090/pages/viewpage.action?pageId=3932983#id-%E3%80%90%E5%88%86%E4%BA%AB%E4%BC%9A1811%E3%80%9109-react%E8%84%9A%E6%89%8B%E6%9E%B6---create-reate-app-6.2%E3%80%81%E5%B5%8C%E5%A5%97%E8%B7%AF%E7%94%B1'
                }}>嵌套路由使用</h2>
                <p>嵌套路由顾名思义就是路由的多层嵌套。主要运用在咱们项目有：卡分期平台管理、超卡平台管理等等。场景样式：左侧菜单栏，右侧主体内容。点击菜单页面不刷新，只有主体部分改变。增强用户体验，单页面ui交互的魅力提现。</p>
                <ul>
                    <li>
                        <h4 className="list-title">vue 主要依赖router-view  ，将router-view当做是一个容器，组件在里面渲染</h4>
                        <img src={require('$img/react/router-nesting-vue.png')} alt=""/>
                    </li>
                    <li>
                        <h4 className="list-title">react 的路由在v3之前是通过route 直接嵌套的，但是v4之后为了践行React的组件化理念，不能让Route标签看起来只是一个标签，route也将是组件的一部分。</h4>
                        <img src={require('$img/react/router-nesting-react.png')} alt=""/>
                    </li>
                </ul>
                
            </div>
        );
    }
}

export default Jxs;
